<script lang="ts" setup>
import { ref, reactive } from "vue";
import zujianchuanzhi from "./zujianchuanzhi.vue";
import digui from "./digui.vue";
//  全局组件  需要在main.ts 中注册
let title = ref("全局组件标题");
let list = reactive<number[]>([1, 2, 3, 4, 5, 6]);

//  局部组件
//  通过引入的方式使用
// import zujianchuanzhi from "./zujianchuanzhi.vue";

// 递归组件 通过一个条件来结束递归 否则导致内存泄漏
// 在父组件配置数据结构 数组对象格式 传给子组件
// import digui from "./digui.vue";
type TreeList = {
  name: string;
  icon?: string;
  children?: TreeList[] | [];
};
const data = reactive<TreeList[]>([
  {
    name: "no.1",
    children: [
      {
        name: "no.1-1",
        children: [
          {
            name: "no.1-1-1",
          },
        ],
      },
    ],
  },
  {
    name: "no.2",
    children: [
      {
        name: "no.2-1",
      },
    ],
  },
  {
    name: "no.3",
  },
]);
</script>
<template>
  <div>
    <Card :title="title" :list="list"></Card>
    <hr />
    <zujianchuanzhi></zujianchuanzhi>
    <hr />
    <digui :data="data"></digui>
  </div>
</template>

